import {Component} from 'react';
import axios from '../../components/service/request';
import {Statistic} from "antd";
import "./admin.less"
import tupian from "./images/center-details-data1.png"
import CountUp from 'react-countup';
import UserSituation from './UserSituation ';
import Equdata from './EquData';


class Admin extends Component {     

    state = {
            user: 0,
            equNumber: 0,                                  
            inequNumber: 0,
            outequNumber: 0,
            repairEquNumber: 0,
            noticeNumber:0,
    };
    
    componentDidMount () {
        const handleError = (error) => {
            console.error(error);
        };
        const handleException = (exception) => {
            console.error(exception);
        };

        axios.post('http://localhost:8080/admin/admin/lists').then(res => {
            if (res.code === 200) {
                this.setState ({
                    user : res.data[0][0].user,                     //用户数量
                    equNumber: res.data[0][0].equNumber,            //设备数量
                    inequNumber: res.data[0][0].inEquNumber,        //在库设备数量
                    outequNumber: res.data[0][0].outEquNumber,      //借出设备数量
                    repairEquNumber: res.data[0][0].repairEquNumber,//维修设备数量
                    noticeNumber: res.data[0][0].noticeNumber       //实验室动态数量
                });
                // console.log(res.data[0][0].user);
                // console.log(res);
            } else {
                console.log("获取失败");
            }
            })
            .catch (handleError)
            .catch (handleException)
    }

    
    

    render() {
        const formatter = (value) => <CountUp end={value} separator="," />;

        const dataItems = [
            { title: '用户数量', value: this.state.user, unit: '人' },
            { title: '实验室动态数量', value:this.state.noticeNumber, unit: '条' },
            { title: '设备总数量', value:   this.state.equNumber, unit: '台' },
            { title: '在库设备数量', value: this.state.inequNumber, unit: '台' },
            { title: '借出设备数量', value: this.state.outequNumber, unit: '台' },
            { title: '维修设备数量', value: this.state.repairEquNumber, unit: '台' },
         
        ];
        return (
            <div className='page'>
                <div className='toppage'>
                    <div className='detail-list'>
                    {dataItems.map((item, index) => (
                        <div className='detail-list-item' key={index}>
                            <img src={tupian} />
                            <div className='detail-item'>
                                <div className='detail-item-text'>{item.title}</div>
                                <div className='detail-item-number'>
                                    <Statistic className='detail-item-number' value={item.value} formatter={formatter} />
                                </div>
                                <span className='unit'>/{item.unit}</span>
                            </div>
                        </div>
                    ))}
                    </div>
                </div>
                <div className='bottompage'>
                    <div className='bottom-left'>
                        <UserSituation />
                    </div>
                    <div className='bottom-right'>
                    <Equdata />
                    </div>
                </div>         
            </div>
       
        );
    }
}

export default Admin;
